<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>画布-时钟</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.clock {
				width: 420px;
				height: 420px;
				margin: 50px auto 0;
			}
			
			#cvs {
				background: #B1A6BE;
			}
		</style>
	</head>

	<body>
		<div class="clock">
			<canvas id="cvs" width="420" height="420"></canvas>
		</div>
		<script>
			var cvs = document.getElementById('cvs');
			var ctx = cvs.getContext('2d');

			function Clock() {
				// 时钟背景图
				var Img = document.createElement('img');
				Img.src = './01.jpg';
				// Img.onload=function (){
				ctx.drawImage(Img, 0, 0, 420, 420);
				// }

				// 时钟圆盘
				ctx.beginPath();
				ctx.strokeStyle = '#60D9F8';
				ctx.lineWidth = 10;
				ctx.arc(210, 210, 200, 0, 2 * Math.PI, true);
				ctx.clip();
				ctx.stroke();
				ctx.closePath();

				// 分刻度  360/60=6
				for(var i = 0; i < 60; i++) {
					ctx.save();
					ctx.beginPath();
					ctx.translate(210, 210);
					ctx.rotate(i * 6 * Math.PI / 180);
					ctx.strokeStyle = '#FEF319';
					ctx.lineWidth = 5;
					ctx.moveTo(0, -185);
					ctx.lineTo(0, -195);
					ctx.stroke();
					ctx.closePath();
					ctx.restore();
				};

				// 时刻度  360/12=30
				for(var i = 0; i < 12; i++) {
					ctx.save();
					ctx.beginPath();
					ctx.translate(210, 210);
					ctx.rotate(i * 30 * Math.PI / 180);
					ctx.strokeStyle = '#60D9F8';
					ctx.lineWidth = 8;
					ctx.moveTo(0, -175);
					ctx.lineTo(0, -195);
					ctx.stroke();
					ctx.closePath();
					ctx.restore();
				};

				// 获取当前时间
				var dates = new Date();
				var h = dates.getHours();
				var m = dates.getMinutes();
				var s = dates.getSeconds();
				h = h + m / 60; //3.5
				m = m + s / 60;
				// 画时间
				var h2 = dates.getHours();
				var m2 = dates.getMinutes();
				var str1 = h2 > 9 ? h2 : ('0' + h2);
				var str2 = m2 > 9 ? m2 : ('0' + m2);
				ctx.beginPath();
				ctx.fillStyle = '#FB1F11';
				ctx.font = '26px 微软雅黑';
				ctx.fillText(str1 + ':' + str2, 175, 340);
				ctx.closePath();

				// 时针
				ctx.save();
				ctx.beginPath();
				ctx.translate(210, 210);
				ctx.rotate(h * 30 * Math.PI / 180);
				ctx.strokeStyle = '#60D9F8';
				ctx.lineWidth = 8;
				ctx.moveTo(0, 14);
				ctx.lineTo(0, -130);
				ctx.stroke();
				ctx.closePath();
				ctx.restore();

				// 分钟
				ctx.save();
				ctx.beginPath();
				ctx.translate(210, 210);
				ctx.rotate(m * 6 * Math.PI / 180);
				ctx.strokeStyle = '#FEF319';
				ctx.lineWidth = 5;
				ctx.moveTo(0, 14);
				ctx.lineTo(0, -150);
				ctx.stroke();
				ctx.closePath();
				ctx.restore();

				// 秒针
				ctx.save();
				ctx.beginPath();
				ctx.translate(210, 210);
				ctx.rotate(s * 6 * Math.PI / 180);
				ctx.strokeStyle = '#FB1F11';
				ctx.lineWidth = 3;
				ctx.moveTo(0, 14);
				ctx.lineTo(0, -170);
				ctx.stroke();
				ctx.closePath();
				//秒针上的圆
				ctx.beginPath();
				ctx.fillStyle = '#60D9F8';
				ctx.strokeStyle = '#FB1F11';
				ctx.lineWidth = 3;
				ctx.arc(0, -155, 5, 0, 2 * Math.PI, true);
				ctx.fill();
				ctx.stroke();
				ctx.closePath();
				//中心圆
				ctx.beginPath();
				ctx.fillStyle = '#60D9F8';
				ctx.strokeStyle = '#FB1F11';
				ctx.lineWidth = 3;
				ctx.arc(0, 0, 7, 0, 2 * Math.PI, true);
				ctx.fill();
				ctx.stroke();
				ctx.closePath();

				ctx.restore();
			}
			Clock();
			setInterval(Clock, 1000);
		</script>
	</body>

</html>